{% load static %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="{% static '../static/favicon.png' %}">

	<link rel="stylesheet" href="{% static '../static/css/bootstrap.min.css' %}">
	<link rel="stylesheet" href="{% static '../static/style.css' %}">
	<link rel="stylesheet" href="{% static '../static/css/animate.min.css' %}">
	<link rel="stylesheet" href="{% static '../static/css/font-awesome.min.css' %}">
	<link href='https://fonts.googleapis.com/css?family="Josefin+Sans"&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>

	<script src="{% static '../static/js/jquery-2.1.0.min.js' %}"></script>
	<script src="{% static '../static/js/bootstrap.min.js' %}"></script>
	<script src="{% static '../static/js/blocs.min.js' %}"></script>
	<script src="{% static '../static/js/jquery.touchSwipe.min.js' %}" defer></script>
	<script src="{% static '../static/js/lazysizes.min.js' %}" defer></script>
    <title>电影详情</title>


<!-- Google Analytics -->

<!-- Google Analytics END -->

</head>
<body>
<!-- Main container -->
<div class="page-container">

<!-- bloc-0 -->
<div class="bloc bgc-black d-bloc" id="bloc-0">
	<div class="container fill-bloc-top-edge">
		<nav class="navbar row">
			<div class="navbar-header">
				<a class="navbar-brand" href="{% url 'index' %}"><img src="{% static '../static/img/logo.png' %}" alt="logo" class="lazyload" />Thought<span style="bold">Works</span></a>
				<button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle menu-icon-rounded-bars" data-toggle="collapse" data-target=".navbar-1">
					<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse navbar-1 special-dropdown-nav">
			    <form action="{% url 'movie_search_form' %}" method="post" class="navbar-form pull-right" role="search">
                    {% csrf_token %}
                    <input type="text" name="q" class="form-control" placeholder="Search">
                    <button type="submit" name="submit" class="btn btn-default">搜索</button>
                </form>
            </div>
		</nav>
	</div>
</div>
<!-- bloc-0 END -->

<!-- bloc-1 -->
<div class="bloc bgc-splashed-white l-bloc" id="bloc-1">
	<div class="container bloc-lg">
        <h2 class="movie-name">{{movie.title}} — {{movie.original_title}} ({{movie.year}})</h2>
        <div class="row voffset">
            <!--left-->
            <div class="col-sm-3 col-xs-6">
                <img src="{{movie.image}}" alt="图片找不到了" class="movie_detail_page" height="190px" />
                <!--<img src="{{other_info.image}}" class="movie_detail_page" width="140px" />-->
			</div>
            <!--end left-->

            <!--middle-->
			<div class="col-sm-5 col-xs-6 movie-info">
                <div id="info">
                    <span><span class="pl">导演: </span> <span class="attrs">{{movie.directors}}</span></span><br>
                    <span class="actor"><span class="pl">主演: </span> <span class="attrs">{{movie.casts}}</span></span><br>
                    <span class="pl">类型: </span> <span property="v:genre">{{movie.genres}}</span><br>

                    <span class="pl">制片国家/地区: </span>{{other_info.region}}<br>
                    <span class="pl">语言: </span> {{other_info.languages}}<br>
                    <span class="pl">片长: </span> {{other_info.durations}}<br>
                    <span class="pl">上映日期: </span> <span property="v:initialReleaseDate" content="">{{movie.year}}年</span><br>
                    <span class="pl">豆瓣评分: </span>{{movie.rating}}<br>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn btn-primary dropdown-toggle watch-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        在线观看，选取路线
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu list-group">
                        {% for i in other_info.videos %}
                        <li>
                            <a href="{{i.sample_link}}" target="_blank">
                                <span>{{i.source.name}} - </span>
                                <span>
                                    {% if i.need_pay %}
                                    收费
                                    {%else%}
                                    <span class="" style="color:#4da8ec">免费!</span>
                                    {%endif%}
                                </span>
                            </a>
                        </li>
                        {%empty%}
                        <li class="text-center"><span>Ooooops,暂无资源</span></li>
                        {% endfor %}
                        <li role="separator" class="divider"></li>
                        <li class="list-group-item-success"><a href="https://movie.douban.com/subject/{{movie.id}}/" target="_blank">豆瓣网中搜索</a></li>
                    </ul>
                </div>
			</div>
            <!--end middle-->

            <!--right-->
            <div class="col-sm-4 col-xs-12">
                <div class="movie-link">
                    <p>
                        <span class="pl">
                            电影链接&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·
                        </span>
                    </p>
                    <ul class="bs">
                        {% for i in other_info.videos %}
                        <li>
                            <a class="playBtn" href="{{i.sample_link}}" target="_blank">
                                {{i.source.name}}
                            </a>
                            <span class="buylink-price"><span>
                                {% if i.need_pay %}
                                VIP 收费
                                {%else%}
                                <span class="" style="color:#127ccc">免费!</span>
                                {%endif%}
                            </span></span>
                        </li>
                        {%empty%}
                        <p><span>Ooooops，暂无观影资源!!!</span></p>
                        {% endfor %}
                    </ul>
                </div>
			</div>
            <!--end right-->

		</div>

        <div class="row">
            <h3 class="detail-page-title"><span class="label label-default">剧情简介</span></h3>
            <div class="col-sm-12 col-xs-12 reviews">
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    {{other_info.intro}}<a href="https://movie.douban.com/subject/{{movie.id}}/"><span class="">豆瓣</span></a>
                </p>
			</div>
		</div>

        <!--豆瓣影评 Top5-->
        <div class="row">
            <h3 class="detail-page-title"><span class="label label-default">豆瓣影评 Top5</span></h3>
            {% for i in other_info.reviews %}
            <div class="col-sm-8 reviews">
                <div class="review-item">
                    <header class="main-hd">
                        <img width="28" height="28" src="{{i.author.avatar}}" style="border: #337ab7;border-style: double" >
                        <span>&nbsp;&nbsp;
                            <a href="{{i.alt}}/">
                                <span class="label label-primary">
                                    {{i.title}}
                                </span>
                            </a>
                        </span>

                    </header>
                    <div class="review-summary">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{i.summary}}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <!--豆瓣影评 Top5 END-->

        <div class="row">
            <h3 class="detail-page-title"><span class="label label-default">相似电影推荐</span></h3>
            {% for rec in recommend_list %}
            <div class="col-sm-2 col-xs-4 text-center">
                <a href="{% url 'movie_detail' rec.id %}" data-gallery-id="gallery-1">
                    <img src="{{rec.image}}" alt="照片无法显示" class="img-responsive lazyload movie-img" />
                    <p class="text-center">
                        <span style="color:#444">
                            {%if rec.title|length >= 8 %}
                            {{rec.title|slice:'6'}} ...
                            {%else%}
                            {{rec.title}}
                            {%endif%}
                        </span>
                    </p>
                </a>
                <p class="text-center movie-rating">
                    <span class="label label-primary">评分: {{rec.rating}}</span>
                </p>
            </div>
            {% endfor %}
        </div>
	</div>
</div>
<!-- bloc-1 END -->

<!-- ScrollToTop Button -->
<a class="bloc-button btn btn-d scrollToTop" onclick="scrollToTarget('1')"><span class="fa fa-chevron-up"></span></a>
<!-- ScrollToTop Button END-->


<!-- Footer - bloc-2 -->
<div class="" id="bloc-2" style="background-color: #000;margin-top: 50px;">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center footer">
				<p>
					<span>CopyRight © Tws-Beijing 2018, All Rights Reserved.</span>
                    <span>
                        <a target="_blank" href="http://tws-beijing.ga/">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="label label-primary">关于我们</span>
                        </a>
                    </span>
				</p>
			</div>
		</div>
	</div>
</div>


<!-- Footer - bloc-2 END -->

</div>
<!-- Main container END -->


</body>
</html>
